<template>
	<view id="root">
		<form @submit="formSubmit" @reset="formReset">
			
			<view class="uni-form-item uni-column gong" id="v1">
				<view class="title">当前登录密码</view>
				<input class="uni-input" name="password1" placeholder="请输入" />
			</view>
			<view class="uni-form-item uni-column gong" id="v2">
				<view class="title">新密码</view>
				<input class="uni-input" name="password2" placeholder="请输入" />
			</view>
			<view class="uni-form-item uni-column gong" id="v3">
				<view class="title">确认新密码</view>
				<input class="uni-input" name="password3" placeholder="请输入" />
			</view>
			<view class="xian"></view>
			<view class="" id="v4">
				<view class="cuo" :style="{display:hidden}">
					两次密码不一致
				</view>
				<text>必须是8-12个英文字母、数字或符号，且字母、数字和符号至少包含两种</text>
			</view>
			
			<view class="uni-btn-v" id="v5">
				<button form-type="submit">确定修改</button>
			</view>
		</form>
	</view>
</template>

<script>
import{
	computed,
	reactive,
	toRefs,
	onMounted
} from 'vue';

import stor from '../../store/index.js'
import http from "../../utils/http.js";
	
	
	export default {		
		setup(){
			// 钩子函数
			onMounted(() => {
				// 如果有缓存,那就将缓存放进vueX中,如果没有那就需要登录;
				const value = uni.getStorageSync('user1');
				if (value) {
					stor.commit('liujinchang/setTododata',value);
				}else{
					console.log("没有缓存");
					uni.navigateTo({
						url:"../login/login"
					})
				}
			})
			
			
			
			let data = reactive({
				hidden:"none",
				
				// 点击确定触发的函数
				formSubmit: function(e) {
					console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
					
					// 如果两次输入的密码是一致的话,再进行接下来的操作
					if(e.detail.value.password2==e.detail.value.password3){
						data.hidden = "none";
						// 发送修改密码申请
						http({
							url:'/login/amend',
							method:'get',
							data:{
								password1:e.detail.value.password1,
								password2:e.detail.value.password2,
								work_id:stor.state.liujinchang.user.work_id
							}
						}).then((res)=>{
							if(res.data.code==200){
								uni.showModal({
									content: '密码修改成功',
									showCancel: false,
									success:function(){
										let mydata = [];
										res.data.data.forEach((key)=>{
											console.log(key);
											mydata = key;
										})
										stor.commit('liujinchang/setTododata',mydata);
										uni.switchTab({
											url:'../my/my'
										})
										
										console.log("接下来要打印一下vueX的数据");
										console.log(stor.state.liujinchang.user);
									}
								});
								
							}else{
								uni.showModal({
									content: '密码修改失败，可能是当前面输入错误，请重试',
									showCancel: false
								});
							}
						})
						
					}else{
						// 两次输入的密码不一致,提醒一下
						data.hidden = "inline";
					}	
				},
			})
			
			return{
				...toRefs(data),
			}
			
		}
		
		
	}
</script>

<style lang="scss">
page{
	background: #f7f7f7;
}
.gong{
	background: #fff;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 12rpx 36rpx;
	
	view{
			color: #333;
			font-size: 28rpx;
			margin-right: 24rpx;
			width: 160rpx;
		}
	input{
		box-sizing: border-box;
		padding-left: 12rpx;
		color: #999;
		font-size: 28rpx;
		height: 60rpx;
		background: #fff;
		flex-grow: 1;
	}
}
#v1{
	margin-top: 24rpx;
}

#v2{
	margin-top: 24rpx;
}
.xian{
	margin: 0 36rpx;
	height: 1px;
	background: #eee;
}
#v4{
	box-sizing: border-box;
	padding: 24rpx 36rpx;
	font-size: 28rpx;
	color: #999;
	display: flex;
	flex-direction: column;
	.cuo{
		margin-bottom: 24rpx;
		font-size: 28rpx;
		color: #ed5a65;
	}
}
#v5{
	margin-top: 60rpx;
	button{
		width: 561rpx;
		height: 88rpx;
		background: linear-gradient(-90deg, #006FFF, #478EEA);
		border-radius: 44rpx;
		font-size: 33rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
}
</style>
